<template>
  <Header />

  <div class="recommendation-container">
    <h1>月份推荐</h1>
    <el-card v-for="[key,value] in Object.entries(recommendations)" :key="key" class="recommendation-card">
      <h3>{{ key }}  热度榜前三 </h3>

      <div v-if="value.length === 0 ">
        <el-empty description="还没有数据，正在添加中..."/>
      </div>
      <div v-else>
        <OneList v-for="(item,index) in value" :key="item.id" :props-data="item"/>
      </div>
      <!-- -->
    </el-card>
  </div>

  <Footer />
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { CityList } from '@/api'
import type { OneListForm } from '@/types/tuil'

// 定义类型
const recommendations = ref<object>([])

onMounted(async ()=> {
  // 获取景点月度推荐
  const res = await CityList.getMonthRecommend()

  recommendations.value = res
  console.log(res);
  
})

</script>

<style scoped>
.recommendation-container {
  padding: 20px;
}

.recommendation-card {
  margin-bottom: 20px;
}
</style> 